<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>浏览器对象模型-屏幕对象(Browser Object Model - Screen Object)</title>
  <!-- 
  在JavaScript的浏览器对象模型（BOM）中，Screen对象用于提供有关用户屏幕的信息。它包含了一些属性，可以帮助开发者获取屏幕的尺寸、分辨率等信息。以下是关于Screen对象的总结说明：
  1. Screen对象概述
  - Screen对象是window对象的一个属性，可以通过screen访问。
  - 它提供了有关用户屏幕的详细信息，通常用于调整网页布局或进行响应式设计。

  2. Screen对象的属性
  以下是一些常用的Screen属性：
  - width：返回用户屏幕的宽度（以像素为单位）。
    console.log(screen.width); // 输出屏幕的宽度
  - height：返回用户屏幕的高度（以像素为单位）。
    console.log(screen.height); // 输出屏幕的高度
  - availWidth：返回用户屏幕可用的宽度（以像素为单位），不包括任务栏等操作系统界面元素。
    console.log(screen.availWidth); // 输出可用屏幕宽度
  - availHeight：返回用户屏幕可用的高度（以像素为单位），不包括任务栏等操作系统界面元素。
    console.log(screen.availHeight); // 输出可用屏幕高度
  - colorDepth：返回屏幕的颜色深度（以位为单位），表示屏幕能够显示的颜色数量。
    console.log(screen.colorDepth); // 输出颜色深度
  - pixelDepth：返回屏幕的像素深度（以位为单位），通常与颜色深度相同。
    console.log(screen.pixelDepth); // 输出像素深度
  
  总结
 Screen对象在浏览器对象模型中提供了重要的功能，使开发者能够获取用户屏幕的相关信息。通过使用Screen对象的属性，开发者可以实现更好的响应式设计和用户体验。
   -->
</head>
<body>

  <script>
    // 1. 获取屏幕的宽度和高度
    console.log("获取屏幕的宽度和高度", screen.width); // 输出屏幕的宽度
    console.log("获取屏幕的宽度和高度", screen.height); // 输出屏幕的高度

    // 2. 获取屏幕的可用宽度和高度
    console.log("获取屏幕的可用宽度和高度", screen.availWidth); // 输出可用屏幕宽度
    console.log("获取屏幕的可用宽度和高度", screen.availHeight); // 输出可用屏幕高度

    // 3. 获取屏幕的颜色深度和像素深度
    console.log("获取屏幕的颜色深度和像素深度", screen.colorDepth); // 输出颜色深度
    console.log("获取屏幕的颜色深度和像素深度", screen.pixelDepth); // 输出像素深度

    function displayScreenInfo() {
      console.log("屏幕宽度: " + screen.width + " 像素");
      console.log("屏幕高度: " + screen.height + " 像素");
      console.log("可用宽度: " + screen.availWidth + " 像素");
      console.log("可用高度: " + screen.availHeight + " 像素");
      console.log("颜色深度: " + screen.colorDepth + " 位");
      console.log("像素深度: " + screen.pixelDepth + " 位");
    }
    displayScreenInfo();
    
  </script>
  
</body>
</html>